<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
</body>
<script src="js/vue.js"></script>
<script>
/*
    关于 no-props 的说明
        1. 只作用在 子组件最外层的那个 div 上面，增加对应的属性
        2. 但是如果是同时存在多个同一级别的 div，那么 no-props 就不能起作用
        3. 针对于2, 想要 no-pros 生效, 就可以使用 $attrs 来声明
*/

    const lkBox = {
        data() {
           return {
           }
        },
        // inheritAttrs: false,    // 这里可以控制避免出现下面 传入的属性写成 info="绑定属性" 的情况
        // template: ` <div>   <p>子组件</p>    </div>`,

        // 这样子的写法就无法绑定 no-props 的属性, 如果要绑定,就需要使用 $attrs
        template: ` 
            <div :sl="$attrs.info">   <p>子组件</p>    </div>
            <div v-bind="$attrs">   <p>子组件</p>    </div>
            <div :style="$attrs.style">   <p>子组件</p>    </div>
            <div>   <p>子组件</p>    </div>
        `,

    };


    const app = Vue.createApp({
        data() {
            return {
            }
        },
        components: {
            "lk-box": lkBox,
        },
        // 正常的属性绑定是需要写成 :info 的，但是在子组件中不接受对应的 info 属性
        // 在审查元素时，可以看到 <div info="绑定属性">子组件</div>，会展示到组件的属性上面去
        template: `
            <lk-box info="绑定属性" style="background-color: antiquewhite; width: 200px; height: 200px;"></lk-box>
        `
    }).mount("#app");
</script>

</html>